<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .classA {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        .classB {
            /* width: 200px;
            height: 200px; */
            font-size: 100px;
        }
    </style>
</head>

<body>
    <!-- <div id="app">
        <input type="text" v-model='input'>

        <img v-bind:src="mysrc" alt="">

        <img :src="mysrc" alt="">

        <div :class="[classAA,classBB]">xxxxxxxxxxxxxxx</div>

        <div :class="{classA:true,classB:false}">xxxxxxxxxxxxxxxxxxxx</div>

        <div :class="[classAA,{classB:isflagA}]">xxxxxxxxxxxxxxxxx</div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                input: '我是一个输入的值',
                mysrc: './img/laofu.jpg',
                classAA: 'classA',
                classBB: 'classB',
                isflag: false,
                isflagA: true
            }
        })
    </script> -->































    <div id="app">
        <input type="text" v-model='input'>

        <img v-bind:src="mysrc" alt="">

        <img :src="mysrc" alt="">

        <div :class="[classAA,classBB]">xxxxx</div>

        <div :class="{classA:true,classB:false}">xxxxx</div>

        <div :class="[classAA,{classB:isfalgA}]">xxxxx</div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                input: '我是一个输入的值',
                mysrc: './img/laofu.jpg',
                classAA: 'classA',
                classBB: 'classB',
                isflag: false,
                isfalgA: true
            }
        })
    </script>
</body>

</html>